import React from 'react';
import {Table, Button, Divider, Pagination, Tabs, Switch, Icon} from 'antd';
import styles from './index.less'

function showTotal(total) {
  return `共 ${total} 条记录`;
}

class UserList extends React.Component{

  state = {
    selectedRowKeys: [], // Check here to configure the default column
    loading: false,
  };


  render(){
    const {list, pageIndex, total,onPageChange , onPageSizeChange, rowSelection ,onView , onDeleteOne ,onUpdateOne ,} =this.props;
    const { loading } = this.state;
    const hasSelected = rowSelection.selectedRowKeys.length>0;
    const start = () => {
      this.setState({ loading: true });
      // ajax request after empty completing
      setTimeout(() => {
        this.setState({
          selectedRowKeys: [],
          loading: false,
        });
      }, 5000);
    };
    const onSwitchChange=(checked,record)=> {
      checked=!checked;
      console.log(checked);
      console.log(`switch to ${checked}`);
    };
    const columns = [{
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '性别',
      dataIndex: 'sex',
    },
    {
      title: '年龄',
      dataIndex: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
    } ,
    {
      title: '启用/禁用',
      render:(text, record) => {
        var check=record.statusCode===1;
        return(
          <Switch
            checkedChildren={<Icon type="check" />}
            unCheckedChildren={<Icon type="close" />}
            checked={check}
            onChange={onSwitchChange.bind(this,check,record)}
          />
        );
      },
    } ,
    {
      title: '创建时间',
      dataIndex: 'createTime',
    } ,
    {
      title: '修改时间',
      dataIndex: 'updateTime',
    } ,
    {
      title: '操作',
      render: (text, record) => {
        return (
          <span>
            <Button onClick={onUpdateOne.bind(null,record)}>修改</Button>
            <Divider type="vertical" />
            <Button onClick={onDeleteOne.bind(null ,record)}>删除</Button>
            <Divider type="vertical" />
            <Button onClick={onView.bind(null,record)}>查看详情</Button>
           </span>
        );
      }
    }];

    return (
      <div className={styles.card}>
        <Tabs type="card">
          <Tabs.TabPane tab="常规管理" key="usual">
            <div style={{ marginBottom: 16,marginTop:16 }}>
              <Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>
                重置
              </Button>
              <span style={{ marginLeft: 8 }}>
                {hasSelected ? `选择了${rowSelection.selectedRowKeys.length} 项` : ''}
              </span>
            </div>
            <Table
              rowKey={row=>row.id}
              rowSelection={rowSelection}
              dataSource={list}
              columns={columns}
              pagination={false}
              loading={this.state.loading}
            />
            <Pagination
              current={pageIndex}
              onChange={onPageChange}
              pageSizeOptions={['5','10','20','50']}
              defaultPageSize={5}
              showSizeChanger
              onShowSizeChange={onPageSizeChange}
              showQuickJumper
              total={total}
              showTotal={showTotal}
              style={{marginTop:'20px' ,float:'right',marginRight:'50px'}}
             />
          </Tabs.TabPane>
          <Tabs.TabPane tab="特殊操作" key="special">
          </Tabs.TabPane>
        </Tabs>
      </div>

    )
  }

}

export default UserList;
